<!-- 人员管理-安全题库-考试记录 -->
<template>
    <div class="questionBank">
        <!-- 搜索 -->
        <el-card class="box-card" body-style="display: flex; align-items: center; justify-content: space-between;">
            <div class="cardBody">
                <div class="cardBody1">
                    试题分类:
                    <el-select class="ecard_val" v-model="searchItem.classification" clearable placeholder="请选择" size="small">
                        <el-option v-for="item in classificationOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </div>
                <div class="cardBody1">
                    试题名称:
                    <el-input class="ecard_val" placeholder="请输入" v-model="searchItem.TestQuestionName" clearable size="small"></el-input>
                </div>
                <div>
                    <el-button type="primary" size="small">搜索</el-button>
                </div>
            </div>
        </el-card>

        <!-- 列表 -->
        <el-card class="boxCard">
            <el-table :data="tableData" stripe style="width: 100%" :height="tableHeight">
                <el-table-column prop="val1" label="试题名称" ></el-table-column>
                <el-table-column prop="val2" label="试题分类"></el-table-column>
                <el-table-column prop="val3" label="考试人" ></el-table-column>
                <el-table-column prop="val01" label="正确数" ></el-table-column>
                <el-table-column prop="val4" label="题目数量"></el-table-column>
                <el-table-column prop="val02" label="分数"></el-table-column>
                <el-table-column prop="val03" label="是否通过">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.val03 == 1" type="success">已通过</el-tag>
                        <el-tag v-if="scope.row.val03 == 2" type="danger">未通过</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="val5" label="状态">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.val5 == 1" type="success">已答卷</el-tag>
                        <el-tag v-if="scope.row.val5 == 2" type="danger">未答卷</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="val6" label="创建时间" width="110"></el-table-column>
            </el-table>
            <div class="boxCard_-pagination">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="currentPage" :page-sizes="[10, 30, 50, 100]" :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>
            </div>
        </el-card>

    </div>
</template>

<script>
    import {
        apiExamRecordList
    } from "@/api/apifox.js";
    export default {
        components: {},
        data() {
            return {
                tableHeight: window.innerHeight - 355,
                // 搜索
                searchItem: {
                    classification: '', // 试题分类
                    TestQuestionName: '', // 试题名称
                },
                classificationOptions: [
                    {value: 1, label: '理论课程'},
                    {value: 2, label: '施工安全知识'},
                    {value: 3, label: '电工理论知识'},
                ], // 试题分类列表

                tableData: [
                    {val1: '使用灭火器扑救火灾', val2: '施工安全知识', val3: '华民瑞', val4: '111', val5: 1, val6: '2025-10-10 12:00:00', val01: '111', val02: '100', val03: 1 },
                    {val1: '使用灭火器扑救火灾', val2: '施工安全知识', val3: '华民瑞', val4: '111', val5: 1, val6: '2025-10-10 12:00:00', val01: '111', val02: '100', val03: 1 },
                    {val1: '使用灭火器扑救火灾', val2: '施工安全知识', val3: '华民瑞', val4: '111', val5: 1, val6: '2025-10-10 12:00:00', val01: '111', val02: '100', val03: 1 },
                    {val1: '使用灭火器扑救火灾', val2: '施工安全知识', val3: '华民瑞', val4: '111', val5: 1, val6: '2025-10-10 12:00:00', val01: '111', val02: '100', val03: 1 },
                ], // 列表
                currentPage: 1, // 当前页数
                pageSize: 10, // 每页显示条目个数
                total: 4, // 总条目数

                projectId: null,
            };
        },
        computed: {},
        created() {

        },

        mounted() {
            this.projectId = this.$store.state.porjectObject.deptId;
            // this.getList();
        },
        methods: {
            getList() {
                apiExamRecordList({
                    deptId: this.projectId,
                    pageNum: this.currentPage,
                    pageSize: this.pageSize,
                }).then(res => {
                    if (res.code == 200) {
                        this.tableData = res.data.list
                        this.total = res.data.total
                    } else {
                        this.$Message.warning(res.msg);
                    }
                }).catch(error => {
                    console.log(error);
                });
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
            },
        }
    };
</script>

<style lang="scss" scoped>
    .questionBank {
        padding: 20px;

        .box-card {

            .cardBody {
                display: flex;
                align-items: center;
                gap: 15px;

                .cardBody1 {
                    display: flex;
                    align-items: center;
                    gap: 10px;

                   .ecard_val {
                       width: 200px;
                   }
                }
            }
        }

        .boxCard {
            margin-top: 20px;

            .boxCard_-pagination {
                display: flex;
                align-items: center;
                justify-content: center;
                margin-top: 20px;
            }
        }

        .abcdCl {
            width: 80%;
        }

        .abcdCls {
            display: flex;
            align-items: center;
            gap: 10px;
        }
    }
</style>

